<template>
   <div class="editGoods">
       <div class="editGoods-top">
          <img src="../../assets/img/1.jpg"/>
          <div class="editGoods-top-r">
            <p>
              该商品只出售一次，过期就没有啦。快来抢购吧！
            </p>
          </div>
       </div>
       <div class="editGoods-body">
           <div class="editGoods-body-top">
               <div class="editGoods-guiGe">
                 <span>规格</span>
                 <span>尺码：L</span>
                 <span>颜色：白色;</span>
               </div>
               <div class="editGoods-price">
                 <span>商品市场价</span>
                 <span>¥139.00</span>
               </div>
           </div>
           <div class="editGoods-body-bottom">
              <div class="setPrice">
                <span>设置售价</span>
                <input class="setPriceInput" type="text"/>
              </div>
              <p class="kuCun">库存56768件</p>
           </div>
       </div>
   </div>
</template>
<script>
export default{
    data(){
      return{

      }
    },
}
</script>
<style scoped>

  .kuCun{
    height: 34px;
    line-height: 34px;
    color: #999999;
    font-size: 12px;
  }

  .setPriceInput{
    float: right;
    height: 34px;
    line-height: 34px;
    width: 80%;
    border: 0;
    text-align: right;
    padding-right: 8px;
  }

  .setPrice span{
    float: left;
    margin-left: 10px;
    display: block;
    height: 34px;
    line-height: 34px;
  }

  .setPrice{
    background: white;
    height: 36px;
    line-height: 36px;
    border: 1px #dddddd solid;
    clear: both;
  }

  .editGoods-body-bottom{
     background:#fcf9dc;
     padding: 10px 10px 0 10px;
  }

  .editGoods-price span:nth-child(2){
    float: right;
  }

  .editGoods-price span:nth-child(1){
    float: left;
  }

  .editGoods-price{
    height: 36px;
    line-height: 36px;
    padding: 0 10px;
  }

  .editGoods-guiGe{
    height: 36px;
    line-height: 36px;
    padding: 0 10px;
  }

  .editGoods-guiGe span:nth-child(1){
    float: left;
  }

  .editGoods-guiGe span:nth-child(2){
    float: right;
  }

  .editGoods-guiGe span:nth-child(3){
    float: right;
    margin-right: 4px;
  }

  .editGoods-body-top{
    border-bottom: 1px #dddddd solid;
  }

  .editGoods-body{
    border-bottom: 1px #dddddd solid;
    border-top: 1px #dddddd solid;
  }

  .editGoods-body{
    overflow: hidden;
  }

  .editGoods-top-r{
    float: left;
    overflow: hidden;
    width: 80%;
    height: 68px;
    padding: 0 0 0 3%;
    display: -webkit-box;    /*必须结合的属性，将对象作为弹性伸缩盒子模型显示*/
    -webkit-line-clamp: 3;    /*用来限制在一个块元素显示的文本的行数*/
    -webkit-box-orient: vertical;    /*必须结合的属性 ，设置或检索伸缩盒对象的子元素的排列方式*/
  }

 .editGoods-top img{
   float: left;
   width: 19.3%;
   height: 68px;
 }

.editGoods-top{
   padding: 11px;
   height: 90px;
   border-bottom: 1px #dddddd solid;
  margin-bottom: 10px;
}
</style>
